<template>
	<view>
		<view class="head">
			<view class="top">
				<view class="arrow">
				</view>
				<view style="color: white; font-size: 48rpx;">附近门店</view>
			</view>
			<uni-card>
				<image src="/static/uni.png" style="width: 100%;"></image>
				<view style="text-align: left;">
					<view class="line1" @click="showDrawer">大美汽车保养厂（解放路店）</view>
					<view style="display: flex;margin-top: 1vh;">
						<uni-rate :readonly="true" size="20" :value="4" />
						4分 <view style="margin-left: 5vw;">销量：556</view>
					</view>
					<view style="margin-top: 1vh;">营业时间：周一到周五 早上8:00-晚上22:00</view>
					<view>
						位置：山阳区人民路与解放路交叉口<image style="height: 2vh;width: 4vw;margin-left: 3vw;"
							src="/static/images/ys/carFix/plane.png"></image>
					</view>
				</view>
			</uni-card>
			<uni-card>
				<view class="container">
					<view class="title">服务项目</view>

					<!-- 服务类型选择 -->
					<radio-group class="radio-group" @change="onServiceChange">
						<label class="radio-item">
							<radio value="普通洗车" /> 普通洗车
						</label>
						<label class="radio-item">
							<radio value="精洗" /> 精洗
						</label>
						<label class="radio-item">
							<radio value="内饰清洗" /> 内饰清洗
						</label>
						<label class="radio-item">
							<radio value="其他清洗" /> 其他清洗
						</label>
					</radio-group>

					<!-- 服务详情 -->
					<view class="service-details">
						<view class="price">
							<text class="current-price">¥ 35.9</text>
							<text class="original-price">¥ 60</text>
						</view>
						<view class="description">
							这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍。
						</view>
					</view>
				</view>
				<!-- <view style="text-align: left;">
					<view class="line1">服务项目</view>
					<view class="line2">
						<view class="lineleft">
							工时价格（每小时）
						</view>
						<view class="lineright">
							<text style="color: #FF4000; font-size: 35rpx; margin-right:2vw ;">￥35.9</text>
							<text style=" text-decoration-line: line-through;">￥60</text>
						</view>
					</view>
					<view style="border: 1rpx solid #F7F7F7;"></view>
					<view class="line2">
						<view class="lineleft">
							轮胎
						</view>
						<view class="lineright">
							<text style="color: #FF4000; font-size: 35rpx; margin-right:2vw ;">￥35.9</text>
							<text style=" text-decoration-line: line-through;">￥60</text>
						</view>
					</view>
					<view style="border: 1rpx solid #F7F7F7;"></view>
					<view class="line2">
						<view class="lineleft">
							.....
						</view>
						<view class="lineright">
							<text style="color: #FF4000; font-size: 35rpx; margin-right:2vw ;">￥35.9</text>
							<text style=" text-decoration-line: line-through;">￥60</text>
						</view>
					</view>
					
				</view> -->
			</uni-card>
			<uni-card>
				<view style="text-align: left;">
					<view class="line1">服务评价</view>
					<view class="pinglun">
						<view class="pinglunleft">
							<u--image shape="circle" width="22vw" height="12vh"
								src="/static/images/ys/carFix/touxiang.jpg"></u--image>
						</view>
						<view class="pinglunright">
							<view class="pinglun1">
								<view><u--text mode="name" text="黄俺是" format="encrypt"></u--text></view>
								<view>2022-12-31</view>
							</view>
							<view><uni-rate :readonly="true" size="15" :value="4" /></view>
							<view>洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！</view>
						</view>
						<view style="border: 1rpx solid #F7F7F7;"></view>
					</view>
					<view class="pinglun">
						<view class="pinglunleft">
							<u--image shape="circle" width="22vw" height="12vh"
								src="/static/images/ys/carFix/touxiang.jpg"></u--image>
						</view>
						<view class="pinglunright">
							<view class="pinglun1">
								<view><u--text mode="name" text="黄俺是" format="encrypt"></u--text></view>
								<view>2022-12-31</view>
							</view>
							<view><uni-rate :readonly="true" size="15" :value="4" /></view>
							<view>洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！</view>
						</view>
						<view style="border: 1rpx solid #F7F7F7;"></view>
					</view>
					<view class="pinglun">
						<view class="pinglunleft">
							<u--image shape="circle" width="22vw" height="12vh"
								src="/static/images/ys/carFix/touxiang.jpg"></u--image>
						</view>
						<view class="pinglunright">
							<view class="pinglun1">
								<view><u--text mode="name" text="黄俺是" format="encrypt"></u--text></view>
								<view>2022-12-31</view>
							</view>
							<view><uni-rate :readonly="true" size="15" :value="4" /></view>
							<view>洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！</view>
						</view>
						<view style="border: 1rpx solid #F7F7F7;"></view>
					</view>
					<view class="pinglun">
						<view class="pinglunleft">
							<u--image shape="circle" width="22vw" height="12vh"
								src="/static/images/ys/carFix/touxiang.jpg"></u--image>
						</view>
						<view class="pinglunright">
							<view class="pinglun1">
								<view><u--text mode="name" text="黄俺是" format="encrypt"></u--text></view>
								<view>2022-12-31</view>
							</view>
							<view><uni-rate :readonly="true" size="15" :value="4" /></view>
							<view>洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！</view>
						</view>
						<view style="border: 1rpx solid #F7F7F7;"></view>
					</view>
				</view>
			</uni-card>

		</view>

		<view class="footer">
			<view class="contact-service">
				<image src="/static/contact-icon.png" class="contact-icon" /> 联系客服
			</view>
			<button class="order-now" @click="placeOrder">立即下单</button>
		</view>
		<uni-popup ref="popup" :width="200" type="bottom">
			<view class="dj">
				<view class="tanChuNeiRong">18656894566</view>
				<view class="tanChuNeiRong">复制</view>
				<view class="tanChuNeiRong">取消拨号</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				selectedService: ''
			};
		},
		methods: {
			onServiceChange(e) {
				this.selectedService = e.detail.value;
				console.log('选择的服务是:', this.selectedService);
			},
			placeOrder() {
				console.log('下单按钮被点击');
				// 在这里添加下单逻辑
			},
			showDrawer() {
				this.$refs.popup.open('bottom') //底部弹出
			},
		}
	};
</script>

<style>
	.tanChuNeiRong {
		width: 100%;
		text-align: center;
		margin-top: 80rpx;
		font-size: 40rpx;

	}

	.dj {
		background: white;
		border-radius: 20px;
		height: 200px;
	}

	.bottom {
		padding-top: 1vh;
		height: 8vh;
		box-sizing: border-box;
		position: fixed;
		background-color: white;
		bottom: 0vh;
		width: 100%;
	}

	.pinglunleft {}

	.pinglunright {}

	.pinglun {
		margin-top: 3vh;
		display: flex;
	}

	.pinglun1 {
		width: 60vw;
		display: flex;
		justify-content: space-between;
	}

	.line2 {
		display: flex;
		justify-content: space-between;
		line-height: 8vh;
	}

	.line1 {
		margin-top: 2vh;
		font-size: 3vh;
		font-weight: 600;
	}

	.top {
		background-color: #2F81FA;
		width: 100%;
		height: 20%;
		position: fixed;
		position: relative;
		text-align: center;
		padding-top: 4%;
		box-sizing: border-box;
	}

	.arrow {
		height: 28rpx;
		width: 28rpx;
		border-top: 4rpx solid white;
		border-right: 4rpx solid white;
		transform: rotate(225deg);
		position: absolute;
		left: 3%;
	}

	.head {
		position: relative;
		text-align: center;
		height: 35vh;
		width: 100%;
		background-color: #2F81FA;
	}

	.container {
		padding: 20px;
		background-color: #fff;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.radio-group {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20px;
	}

	.radio-item {
		font-size: 16px;
	}

	.service-details {
		padding: 10px;
		border-top: 1px solid #ddd;
	}

	.price {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.current-price {
		font-size: 18px;
		font-weight: bold;
		color: #e60012;
		margin-right: 10px;
	}

	.original-price {
		font-size: 14px;
		color: #999;
		text-decoration: line-through;
	}

	.description {
		font-size: 14px;
		color: #666;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
		background-color: #fff;
		border-top: 1px solid #ddd;
	}

	.contact-service {
		display: flex;
		align-items: center;
		font-size: 16px;
		color: #333;
	}

	.contact-icon {
		width: 24px;
		height: 24px;
		margin-right: 8px;
	}

	.order-now {
		background: linear-gradient(90deg, #4facfe, #00f2fe);
		color: #fff;
		font-size: 16px;
		border: none;
		border-radius: 20px;
		margin-right: 0%;
	}
</style>